import React, { memo, useState } from 'react'
import TopNavigation from '../../components/topNavigation'
import BottomNavigation from '../../components/bottomNavigation'
import GuessLike from '../../components/guessLike'
import { MyIcon } from '../../components/Icon'
import { Carousel } from 'antd-mobile-v2'
import { RightOutline } from 'antd-mobile-icons'
import styles from './detail.module.less'
import good1 from '@/assets/img/good/good1.jpg'
import good2 from '@/assets/img/good/good2.jpg'
import good3 from '@/assets/img/good/good3.jpg'
import good4 from '@/assets/img/good/good4.jpg'
import good5 from '@/assets/img/good/good5.jpg'

const Detail: React.FC = memo(() => {
	return (
		<div>
			<TopNavigation />
			<Carousel autoplay infinite dots={false}>
				{[good1, good2, good3, good4, good5].map((item, i) => (
					<a key={i} style={{ width: '100%' }}>
						<img src={item} alt='' style={{ width: '100%', verticalAlign: 'top' }} />
					</a>
				))}
			</Carousel>
			<div className={styles.goods_detail_info}>
				<div className={styles.price_container}>
					<div className={styles.price}>¥228</div>
					<div className={styles.discount}>
						预估到手价¥226
						<RightOutline className={styles.discount_icon} />
					</div>
				</div>
				<div className={styles.title}>测试商品勿拍不发货快手小块</div>
				<div className={styles.remarks}>
					支持7天无理由退货 . 极速退款 <RightOutline className={styles.right_arrow} />
				</div>
				<div className={styles.remarks}>48小时内从北京市市辖区发货</div>
			</div>
			<div className={styles.shop_wrap}>
				<div className={styles.base_info}>
					<img src='https://tx2.a.kwimgs.com/uhead/AB/2020/08/03/11/BMjAyMDA4MDMxMTQ2MzJfODMzMDkzOTVfMV9oZDQ0Xzg4Ng==_s.jpg' alt='' />
					<div className={styles.more}>
						<div className={styles.main_info}>
							<div className={styles.seller_name}>sir东东东的小店</div>
							<div className={styles.soldAmount}>总销量 83件</div>
						</div>
						<div className={styles.right_info}>
							<span>进店逛逛</span>
						</div>
					</div>
				</div>
				<div className={styles.star}>
					<div className={styles.icon}>
						购物体验星级
						<span className={styles.icon_container}>
							<MyIcon type='icon-xingxing' className={styles.xing} size='lg' />
							<MyIcon type='icon-xingxing' className={styles.xing} size='lg' />
							<MyIcon type='icon-xingxing' className={styles.xing} size='lg' />
							<MyIcon type='icon-xingxing' className={styles.xing} size='lg' />
							<MyIcon type='icon-xingxing' className={styles.xing} size='lg' />
						</span>
					</div>
					<div className={styles.evaluate}>
						<div>商品质量 4.5</div>
						<div>商品质量 4.5</div>
						<div>商品质量 4.5</div>
						<div>商品质量 4.5</div>
					</div>
				</div>
			</div>
			<div className={styles.detail}>
				<div className={styles.shop_detail_title}>商品详细</div>
				<div className={styles.text}>非常可爱好玩的手办，收藏价值高</div>
				{[good1, good2, good3, good4, good5].map((item, i) => (
					<img src={item} alt='' key={i} style={{ width: '100%', verticalAlign: 'top' }} />
				))}
			</div>
			<GuessLike/>
			<BottomNavigation />
		</div>
	)
})
export default Detail
